<?php 
session_start();
require_once 'HTML5Header.php';
require_once 'loginbbdd.php';
require_once('java/Java.inc');
require_once 'config_bbdd.php'; 
?>

<body>

    <?php require_once 'BarraNavegacion.php';?>
  
  <?php require_once 'vars.php';?>
    
    <?php
        //Si no hemos abierto sesión...
        if (!isset($_SESSION["nombre"])){
          header("Location: index.php");          
        }
        else {
          require 'config_bbdd.php';
          //Si no se puede conectar a la BBDD 
          if (! @mysql_select_db("usersweb",$myconn)){
            echo "<p>Error al conectar a la BBDD.</p>";
            exit();
          }
          else{
            require_once 'vars.php';

            echo "<div class=\"container\">
                <div class=\"hero-unit\">
                  <h2>Bienvenido a MoodvieWeb</h2>
                  <h1>", $_SESSION["nombre"],"</h1>
                  </br>";     
                  
            if (!isset($_SESSION["provinciaUser"])) 
              echo "<p>Aún no has seleccionado tu provincia. Hazlo <a href=\"configuracion.php\">aquí</a></p> \n";
            if (cargaTemperamento($_SESSION["idUser"])){
            
              echo" </br>
                  </br>
                  <p>A continuación le mostramos su temperamento</p>
                  </br>
                  <div class=\"row\">
                    <div class=\"span10\">  
                        <table class=\"table table-bordered table-condensed\" summary=\"Porcentaje de temperamentos\">
                          <tr>
                            <th>Guardián</th>
                            <th>Artesano</th>
                            <th>Idealista</th>
                            <th>Racional</th>
                          </tr>
                          <tr>
                            <td>".$_SESSION["userGuardian"]."%</td>
                            <td>".$_SESSION["userArtesano"]."%</td>
                            <td>".$_SESSION["userIdealista"]."%</td>
                            <td>".$_SESSION["userRacional"]."%</td>
                          </tr>
                        </table>
                        <br />
                        <br />
                        <div id=\"chart_div\" style=\"width: 600px; height: 300px;\">
                    </div>
                  </div>";
              
              
              /*echo "<p align=\"center\"><div align=\"center\" style=\"font-size:16px \"><b><u>TEMPERAMENTOS</u><br><br>
              GUARDIAN ".$_SESSION["userGuardian"]."% ARTESANO ".$_SESSION["userArtesano"]."% 
              IDEALISTA ".$_SESSION["userIdealista"]."% RACIONAL ".$_SESSION["userRacional"]."% </div></p>";
              
              if (isset($_SESSION["Accion"])){
                echo "<p align=\"center\"><div align=\"center\" style=\"font-size:16px \"><u>GENEROS</u><br><br>
                ACCION ".$_SESSION["Accion"]."%  ANIMACION ".$_SESSION["Animacion"]."%  AVENTURAS ".$_SESSION["Aventuras"]."% 
                COMEDIA ".$_SESSION["Comedia"]."%  DOCUMENTAL ".$_SESSION["Documental"]."% DRAMA ".$_SESSION["Drama"]."%<br> 
                FANTASIA ".$_SESSION["Fantasia"]."%  ROMANTICA ".$_SESSION["Romantica"]."%  TERROR ".$_SESSION["Terror"]."%  
                THRILLER ".$_SESSION["Thriller"]."%  CIENCIAFICCION ".$_SESSION["CienciaFiccion"]."% </div></b</p>";
              }*/
              
            }
            else
              echo "<p>Aún no has hecho el <a href=\"test.php\"> Test</a>. ¡Necesitas hacerlo para que conozcamos tu temperamento!</p>";
          }
        
        ?> 
         
		<button class="btn btn-inverse comofun" onClick=clicked()>¿Cómo funciona?</button>
        
        <div class="infofun" id="info-fun">
        	<p>Para poder recomendarte una película la aplicación se basa en la teoría de los temperamentos, según la cual, cada persona es una combinación de 4 temperamentos básicos.</p>
          	<div id="tablaTem">
	            <table border="0" id="tablaTempe">
	              	<thead>
              			<tr align="center">
				        	<th>Artesano</th>
				            <th>Guardian</th>
				            <th>Idealista</th>
				            <th>Racional</th>
	            		</tr>
	              	</thead>
	              	<tr>
		          		<td class="pequeno" valign="top">
		                	<div id="artesa">
		                		La habilidad natural de destacar en algún arte, desde las bellas artes hasta el arte de la dialéctica o los negocios. Amantes de la diversión, realistas pero optimistas, disfrutan del presente. 
		                		Creativos y espontáneos, en busca de causar impacto en los demás. Confían en sus impulsos, creen que todo les saldrá bien.
		                	</div>
		              	</td>
	              		<td class="pequeno" valign="top">
	                		<div id="guardia">
	                			Piedra angular de la sociedad, entregados a servir y preservar las instituciones. Cran capacidad de gestión de bienes y servicios. Buenos supervisores. Personas leales, obedientes, responsables y muy trabajadoras. Actúan con cautela, buscan seguridad en sus vidas. Adoran la justicia y la pertenencia a un grupo.
	                		</div>
		              	</td>
		              	<td class="pequeno" valign="top">
		                	<div id="idealis">
		                		Pasionales y entregados al crecimiento personal. Se esfuerzan en descubrir su verdadero yo, en mejorar como personas. Disfrutan ayudando a la gente y creando vínculos. Anhelan una vida romántica y la sabiduría. Intensos y espirituales. Gente muy auténtica, querida y ética en sus acciones.
		                	</div>
		              	</td>
	              		<td class="pequeno" valign="top">
	                		<div id="racion">
	                			Resolutores de problemas. Analizan el mundo con intención de entender cómo funcionan las cosas. Escépticos y pragmáticos. Orgullosos de su ingenio. Líderes estratégicos, con fuerza de voluntad. Tranquilos y serenos, se dejan guiar por la lógica. Disfrutan con la tecnología. A veces se ven como personas frías y distantes.
	                		</div>
	              		</td>
	              	</tr>
	            </table>
        	</div>  
        </div>    
    </div>
    </div>
    <?php } ?>
  </div>  
  <div class="modal-footer">
    <!-- <p>&copy; MoodvieWeb</p>-->
    <p>&copy; MoodvieWeb - David Carboneras, Fernando Álvarez y Moisés Martínez</p>
  </div>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <?php require_once 'bootstrapjs.php';?>
  
 
  <script type="text/javascript">
	  var rac = <?php echo $_SESSION["userRacional"]; ?>;
	  var ide = <?php echo $_SESSION["userIdealista"]; ?>;
      var gua = <?php echo $_SESSION["userGuardian"]; ?>;
	  var art = <?php echo $_SESSION["userArtesano"]; ?>;
	  google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Temperamento', 'Porcentaje'],
          ['Racional',     rac],
          ['Idealista',    ide],
          ['Guardián',  gua],
          ['Artesano', art]
        ]);

        var options = {
          title: 'Temperamentos',
          colors: ['#0076FF','#85B6C1','#009AFF','#000BFF']
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
  </script>
  
  <script>
	
	function clicked() 
	{ 
		$(".infofun").slideToggle(); 
	}
     
  </script>
  
</body>
</html>
